<template>
	<div>
		<el-container>
			<el-aside>
				<Navigation/>
			</el-aside>
			<el-container>
				<el-header>
					<BreadCrumb :navName="navs"/>
				</el-header>
				<el-main>
					<el-form ref="form" :model="vender" label-width="150px">
						<div class="taskInfo">

							<el-row>
								<el-col :span="22">
									<el-form-item label="商户名称：">
										<el-input v-model="vender.name" placeholder="请输入商户名称"></el-input>
									</el-form-item>
								</el-col>
							</el-row>

              <el-row>
                <el-col :span="22">
                  <el-form-item label="店铺地址：">
                    <el-input v-model="vender.shopAddress" placeholder="请输入店铺地址"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

						</div>

						<div class="taskInfo">
							<el-form-item label="二维码：">
								<el-upload
								class="upload-demo"
								v-bind:action="uploadVenderUrl"
								:on-remove="handleRemove"
								:on-success="handleSuccess"
								:on-error="handleError"
								:limit="5"
								:file-list="fileListVender"
								list-type="picture">
									<el-button size="small" type="primary">点击上传</el-button>
								</el-upload>
							</el-form-item>

							<el-form-item label="公众号：">
								<el-input type="textarea" v-model="vender.accountAddress" placeholder="请输入公众号地址"></el-input>
							</el-form-item>

						</div>

						<el-form-item>
							<el-button type="primary" @click="addWare()">确定</el-button>
							<el-button @click="cancelWare()">取消</el-button>
						</el-form-item>
					</el-form>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script>
	import Navigation from '../Navigation'
	import BreadCrumb from '../BreadCrumb'
	// 配置API接口地址
	import config from "../../config.json"
	const Root = config.API_HOST;
	export default{
		name:'VenderAdd',
		methods: {
			addWare(){
				var that = this;
				this.$api.post('vender/add',that.vender,function(data){
					if(data.flag=="success"){
						that.$router.push('/vender/list');
					} else{
						that.$message.error(data.msg);
					}
				});
			},
      //跳转商户列表方法
			cancelWare(){
				this.$router.push('/vender/list');
			},
			handleSuccess(response, file, fileList){
				if(response.flag=="success"){
					this.vender.venderImages.push(response.data.id);
				}
			},
			handleRemove(file,fileList){
				for(var i=0;i<this.vender.venderImages.length;i++){
					if(this.vender.venderImages[i]==file.response.data.id){
						this.vender.venderImages.splice(i,1);
						break;
					}
				}
			},
			handleError(){
				this.$message.error('上传图片失败');
			}
		},
		data:function(){
			return {
				uploadVenderUrl:Root+"/vender/image/upload",
				fileListVender:[],
        navs:["商户数据管理","新建商户"],
        vender:{
          name:"",
          accountAddress:"",
          shopAddress:"",
          wxCode:"",
          createTime:"",
          venderImages:[]
        }
			}
		},
		components:{
			Navigation,
			BreadCrumb
		}
	}
</script>

<style scoped>
	.taskInfo{
		padding: 20px;
		border: 1px solid #dddddd;
		margin-bottom: 20px;
	}
	#changePercent{
		width: 110px !important;
	}
</style>
